<template>
  <base-dialog title="邮件日志详情" ref="baseDialog" :btnShow="false" width="42%">
    <el-form ref="form" disabled :model="form" label-width="145px" size="mini">
      <el-form-item label="接收邮箱地址" prop="code">
        {{ form.toMail }}
      </el-form-item>
      <el-form-item label="邮箱账号编号" prop="code">
        {{ form.accountId }}
      </el-form-item>
      <el-form-item label="发送邮箱地址" prop="nickname">
        {{ form.fromMail }}
      </el-form-item>
      <el-form-item label="模板编号">
        {{ form.templateId }}
      </el-form-item>
      <el-form-item label="模板编码">
        {{ form.templateCode }}
      </el-form-item>
      <el-form-item label="模版发送人名称">
        {{ form.templateNickname }}
      </el-form-item>
      <el-form-item label="邮件标题">
        {{ form.templateTitle }}
      </el-form-item>
      <el-form-item label="邮件内容">
        <Editor v-model="form.templateContent" :min-height="192" read-only />
      </el-form-item>
      <el-form-item label="邮件参数">
        {{ form.templateParams }}
      </el-form-item>
      <el-form-item label="发送状态">
        {{ form.sendStatus }}
      </el-form-item>
      <el-form-item label="发送时间">
        {{ form.sendTime }}
      </el-form-item>
      <el-form-item label="发送返回的消息编号">
        {{ form.sendMessageId }}
      </el-form-item>
      <el-form-item label="发送异常">
        {{ form.sendException }}
      </el-form-item>
    </el-form>
  </base-dialog>
</template>

<script>
import { getById } from "@/api/message/mail/log"
import Editor from "@/components/Editor"

export default {
  name: "Dialog",
  props: {
    sendStatusList: {
      default: () => [],
      type: Array
    },
    simpleMailAccountList: {
      default: () => [],
      type: Array
    }
  },
  components: {
    Editor
  },
  data() {
    return {
      form: { templateContent: "" }
    }
  },
  methods: {
    init(item) {
      this.$refs.baseDialog.dialogVisible = true
      if (item) {
        getById(item.id).then((res) => {
          this.form = res.data
          const info = this.sendStatusList.find((item) => item.value === this.form.sendStatus)
          this.form.sendStatus = info ? info.label : ""

          const arr = Object.keys(this.form.templateParams).map((e) => this.form.templateParams[e])
          this.form.templateParams = arr.join(", ")
          // this.$nextTick(() => {
          //   console.log(this.form.templateContent)
          //   this.$refs.BaseEditor.html = this.form.templateContent
          // })
        })
      }
    },
    changeHTML(val) {
      this.form.templateContent = val
    },
    handleClose() {
      this.form = { templateContent: "" }
      this.$refs.baseDialog.dialogVisible = false
      this.title = ""
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select,
.picker,
.el-input-number {
  width: 100%;
}
</style>
